<template>
  <div id="login" style="height: 100vh; overflow: hidden">
    <div class="main">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            登 录
          </a-button>
          <!-- <a href="#" st>register now!</a> -->
          <a href="#" style="color: #fff;" class="register">注册</a>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
import BIRDS from "vanta/src/vanta.birds";
import * as THREE from "three";
import { ref, onMounted, onBeforeUnmount, reactive, computed } from "vue";
import {useRouter} from 'vue-router' 
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {reqUserLogin} from '../apis'
import { message } from 'ant-design-vue';
import store from '../store'
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

export default {
  name: "Login",
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    // 路由
    const router = useRouter();
     const formState = reactive<FormState>({
      // username: 'admin',
      // password: 'admin123',
      username: '',
      password: '',
      remember: true,
    });
    const onFinish = async (values: any) => {
      console.log('Success:', values);
      let res = await reqUserLogin(values);
      let content =  res.data.content;
      if(res.data.success){
        // console.log(res.data.content);
        // 将信息保存在本地
        // LocalStoreageUtil.set('token',res.data.content);
        store.commit('GETUSERINFO', content);
        message.success("登录成功");
        if(content.permission == '1'){
              // 路由跳转
            router.replace({
              path: '/layout/content'
            });
        }else if (content.permission == '0'){
        // 路由跳转
            router.replace({
              path: '/layout/userAdmin'
            });
        }
      }else {
        // console.log(res.data.message);
        message.error(res.data.message);
      }
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    // 简单校验，用户密码不能为空
    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });
    // 3D背景
    let vantaEffect = ref();
    onMounted(() => {
      BIRDS({
        el: "#login",
        THREE: THREE,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        backgroundColor: 0xebe9f0,
        color1: 0xb31c1c
      });
    });
    onBeforeUnmount(() => {
      if (vantaEffect.value) {
        vantaEffect.value.destroy();
      }
    });
    return {
      // 表单
       formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },
};
</script>

<style scoped>
  #login .main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    /* background: rgba(255,255,255,.3);
    transform: translate(-50%,-50%);
    border-radius: 5px; */
  }
  @media screen and (max-width: 750px){
     #login .main {
        width: 60%;
        height: 60%;
     }
  }
  #login .register:hover {
      color: aquamarine;
  }
 .login-form {
  max-width: 300px;
  padding: 15px;
  /* background: rgba(255,255,255,.3); */
  background: rgba(0,0,0,.5);

  transform: translate(-50%,-50%);
  border-radius: 5px;

}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 .login-form-forgot {
  margin-bottom: 24px;
}
 .login-form-button {
  width: 100%;
}
</style>
